<template>
  <div class="mine-invited">
    <div class="centerBox">
      <div id="qrcode"></div>
      <div class="text">{{userName}}</div>
    </div>
    <div class="shareText">
      保存二维码分享给好友即可邀请
    </div>
    <!-- <a class="invite" href="weixin://"> 立即邀请</a> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import QRCode from 'qrcodejs2'
export default {
  name: 'mine-invited',
  components: { QRCode },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    this.userName = this.user.username
    this.$nextTick(function() {
      this.qrcode()
    })
  },
  data() {
    return {
      userName: ''
    }
  },
  methods: {
    qrcode() {
      const _this = this
      const qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度
        text: location.origin + location.pathname + '?inviteCode=' + _this.user.referralCode // 二维码内容
      })
      console.log(qrcode)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/assets/css/mixin.scss";
  @import 'src/assets/css/variables.scss';
.mine-invited{
  height: 100vh;
  overflow: hidden;
  background-color: #f8f4f5;
  .centerBox{
    overflow: hidden;
    height: 116vw;
    margin: 20px;
    background-image: url('~@/assets/images/manhua/tuijianma@3x.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .text{
      text-align: center;
    }
    #qrcode{
      width: 200px;
      margin: 22vw auto 5px auto;
    }
  }
  .invite{
    position: fixed;
    bottom: 0;
    height: 50px;
    text-align: center;
    color: white;
    background-color: $color-theme;
    width: 100%;
    line-height: 50px;
    font-size: 16px;
  }
  .shareText{
    text-align: center;
    margin-top: -18vw;
  }
  .louOut{
    background-color: $color-theme;
    color: white;
    text-align: center;
    line-height: 40px;
    position: relative;
    width: 90%;
    left: 5%;
    margin-top: 20px
  }
}

</style>
